<?php


$startdate = (time() - (86400*365));

$cats = array();
$vals = array();
$data = array();

$year = date("Y", $startdate);
$month = date("m", $startdate - (86400*31));
$day = date("d", $startdate);
$hour = date("H", $startdate);
$min = date("i", $startdate);
$sec = date("s", $startdate);
$startdate = date("Y-m-d H:i:s", $startdate);

$sql = "select * from stats_loadtime where time >= '".$startdate."'";
$row = $db->getAll_assoc($sql);
for ($a=0; $a<count($row); $a++) {
	$cats[] = $row[$a]['time'];
	$vals[] = $row[$a]['loadtime'];
	
	$syear = date("Y", strtotime($row[$a]['time']));
	$smonth = date("m", strtotime($row[$a]['time']) - (86400*31));
	$sday = date("d", strtotime($row[$a]['time']));
	$shour = date("H", strtotime($row[$a]['time']));
	$smin = date("i", strtotime($row[$a]['time']));
	
	$data[] = '[Date.UTC('.$syear.','.$smonth.','.$sday.','.$shour.','.$smin.'),'.$row[$a]['loadtime'].']';
}



?><div id="maincontent">
	<div id="content">
    <div class="box1">
      <h1>Page load times</h1>
		<script src="js/highcharts/js/highcharts.js" type="text/javascript"></script>
		<script src="js/highcharts/js/modules/exporting.js"></script>
		<script>

			(function($){ // encapsulate jQuery

			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					global: {
						useUTC: true
					}, 
					chart: {
						renderTo: 'container',
						zoomType: 'x',
						spacingRight: 20
					},
					title: {
						text: 'LinuxCounter Website Loading Speed'
					},
					subtitle: {
						text: document.ontouchstart === undefined ?
							'Click and drag in the plot area to zoom in' :
							'Drag your finger over the plot to zoom in'
					},
					xAxis: {
						type: 'datetime',
						maxZoom: 3600, // fourteen days
						title: {
							text: null
						},
					},
					yAxis: {
						title: {
							text: 'Loadingtime'
						},
						min: 0.6,
						startOnTick: false,
						showFirstLabel: false
					},
					tooltip: {
						xDateFormat: '%d. %B %Y',
						shared: true
					},
					legend: {
						enabled: false
					},
					plotOptions: {
						area: {
							fillColor: {
								linearGradient: [0, 0, 0, 2000],
								stops: [
									[0, Highcharts.getOptions().colors[0]],
									[1, 'rgba(2,0,0,0.1)']
								]
							},
							lineWidth: 1,
							marker: {
								enabled: false,
								states: {
									hover: {
										enabled: true,
										radius: 5
									}
								}
							},
							shadow: false,
							states: {
								hover: {
									lineWidth: 1
								}
							}
						}
					},

					series: [{
						type: 'area',
						name: 'Loadingtime',
						/* pointInterval: 300000, */
						/* pointStart: Date.UTC(<?=$year?>, <?=$month?>, <?=$day?>, <?=$hour?>, <?=$min?>), */
						data: [<? echo implode($data, ','); ?>]
					}]
				});
			});

			})(jQuery);
		</script>
      
      
      <div id="container" style="width: 100%; height: 600px"></div>
      
      
    </div>
  </div>
</div>
